<template>
    <view class="content">
        <!-- 头部 -->
        <u-navbar id="navbar" bgColor="#fff"
            :fixed="true" :safeAreaInsetTop="true" :placeholder="true"
            leftIconSize="0" :autoBack="false" title="">
            <view class="u-flex" slot="left">
                <text class="u-font-32 font-bold">消息</text>
            </view>
            <view class="u-flex" slot="right">
                <u-icon name="/static/news/scan.png" size="21" @tap="test"></u-icon>
                <u-icon class="u-m-l-20" name="/static/news/staff.png" size="21" @tap="test"></u-icon>
                <u-icon class="u-m-l-20" name="/static/news/add.png" size="21" @tap="test"></u-icon>
            </view>
        </u-navbar>
        <view class="u-flex u-row-between search">
            <u--input
                class="search-input u-p-l-30 u-p-r-30"
                fontSize="28rpx"
                v-model="search"
                prefixIcon="search"
                prefixIconStyle="font-size:24px"
                placeholder="请输入查询信息"
                placeholderStyle="fontSize:28rpx"
                clearable
                border="none">
            </u--input>
            <u-button class="search-btn u-m-l-20" type="primary" text="搜索" @tap="test"></u-button>
        </view>

        <scroll-view scroll-y class="uni-area" :style="{height:boxH+'px'}">
            <view v-for="(item,index) in list" :key="index" class="u-m-t-30 u-flex item" @tap.stop="examine(item.type)">
                <u--image v-if="item.type=='system'" src="/static/news/icon1.png" width="90rpx" height="90rpx"></u--image>
                <u--image v-else src="/static/news/icon2.png" width="90rpx" height="90rpx"></u--image>
                <view class="u-m-l-30" style="width:80%">
                    <view class="u-m-b-12 u-flex u-row-between">
                        <text class="u-font-32 font-bold u-line-1">{{item.title}}</text>
                        <!-- <text v-if="item.type=='system'" class="u-font-24 uni-gery-color">{{item.date}}</text> -->
                        <!-- v-else -->
                        <view class="u-flex u-font-26 uni-gery-color">
                            <text class="u-m-r-10">全部</text>
                            <u-icon name="arrow-right" size="13" color="#A6ABB7"></u-icon>
                        </view>
                    </view>
                    <view class="u-font-28 uni-gery-color u-line-1">{{item.content}}</view>
                </view>
            </view>
            <u-gap height="30rpx" bgColor="#FBFCFC"></u-gap>
        </scroll-view>

        <!-- tabbar阴影 -->
        <view class="tabbar-shadow"></view>
    </view>
</template>

<script>
export default {
    data(){
        return{
            boxH: 731,
            search: '',
            list:[
                { type:'system', title:'系统消息', content:'暂无系统消息', date:'04-22' },
                { type:'autonym', title:'实名制审批', content:'最新消息：有待审批文件', date:'04-22' },
                { type:'buka', title:'补卡审批', content:'最新消息：有待审批文件', date:'04-22' },
                { type:'team', title:'新增班组审批', content:'最新消息：有待审批文件', date:'04-22' },
                { type:'transfer', title:'人员调岗审批', content:'最新消息：有待审批文件', date:'04-22' },
                { type:'leave', title:'人员离场审批', content:'最新消息：有待审批文件', date:'04-22' },
                { type:'foreman', title:'班组长变更审批', content:'最新消息：有待审批文件', date:'04-22' },
                { type:'enter', title:'人员进场审批', content:'最新消息：有待审批文件', date:'04-22' },
            ]
        }
    },

    mounted() {
		this.boxH = uni.$u.sys().windowHeight -uni.$u.sys().statusBarHeight -44 - 55;
	},

    methods: {
        test(){
            uni.$u.toast('开发中')
        },

        // 审批
        examine(type){
            if( type != 'system' ){
                uni.navigateTo({
                    url: '/pages/examine-bag/examine-list?type='+type
                })
            }else{
                uni.$u.toast('暂无系统消息')
            }
        }
    },
}
</script>

<style scoped lang="scss">
    .content{
        .search{
            background: #fff;
            padding: 0 30rpx 20rpx;
            box-shadow: 0px 5px 10px -10px rgba(0, 0, 0, 0.5);
            .search-input{
                width: 534rpx !important;
                box-sizing: border-box;
                height: 74rpx;
                background: #F6F7F8;
            }
            .search-btn{
                width: 136rpx;
                height: 74rpx;
                font-size: 28rpx;
            }
        }

        .item{
            padding: 40rpx 30rpx;
            background: $uni-text-color-inverse;
        }


        // tabbar阴影
        .tabbar-shadow{
            width: 100%;
            position: fixed;
            left: 0;
            z-index: 997;
            box-shadow: 0px -5px 10px -10px rgba(0, 0, 0, 0.5);
            height: 44px;
            /* #ifdef APP-PLUS */
            bottom: -44px;
            /* #endif */
            /* #ifdef H5 */
            bottom: 11px;
            /* #endif */
        }
    }
</style>